웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
NuxtJS를 사용할 경우 useRouter 훅을 사용하여 쿼리스트링을 변경하는 방법을 알아봅니다. 예를들어 아래와 같이 주소창의 쿼리 스트링만 변경되겠죠.
Before) https://webisfree.com/?category=vuejs
After) https://webisfree.com/?category=nuxtjs
참고로 쿼리스트링 변경이 필요한 경우 페이지의 특정 정보(카테고리나 현재 페이지 등등)를 전달하는 기능을 구현할 때 사용됩니다. 예를들어 페이지에 다시 접속하거라 리프레쉬할 경우 쿼리스트링에 따라 다른 정보를 보여줄 수 있겠죠. 만약 이 방법이 아니라면 쿠키나 로컬스토리지 등의 로컬 저장소 방법을 사용해야 할 수 있습니다.
# NuxtJS useRouter를 사용하여 querystring 변경하기
우선 어떻게 쿼리스트링을 바꿀 수 있는지 바로 알아봅니다. 아래의 코드를 봐주세요.
import { useRouter } from 'nuxt'
const myComponent = () => {
const router = useRouter()
const updateQueryStr = () => {
router.push({
query: { category: 'nuxtjs' }
})
}
return (
<button onClick={updateQueryStr}>카테고리 변경</button>
)
}
const myComponent = () => {
const router = useRouter()
const updateQueryStr = () => {
router.push({
query: { category: 'nuxtjs' }
})
}
return (
<button onClick={updateQueryStr}>카테고리 변경</button>
)
}
위 예제에서는 버튼이 하나 존재합니다. 이 버튼은 카테고리를 변경하는 버튼으로 클릭시 updateQueryStr() 함수를 실행합니다. 이때 useRouter 훅을 사용해 현재의 쿼리스트링 category의 값을 nuxtjs로 변경하는 간단한 기능을 수행하게 됩니다.
여기서 router.push() 부분만 다시 보겠습니다. 보편적으로 path 또는 name 프로퍼티를 사용하여 페이지를 이동하는데 많이 쓰입니다. 아래처럼 말이죠.
router.push({
path: '/',
query: { category: 'nuxtjs' }
})
path: '/',
query: { category: 'nuxtjs' }
})
하지만 아래처럼 query만 사용할 경우 페이지 이동없이 쿼리스트링만 변경 가능하게 됩니다. 즉 페이지 이동이 필요하지 않다면 push나 name을 사용하지 않고 사용이 가능하죠.
router.push({
query: { category: 'nuxtjs' }
})
query: { category: 'nuxtjs' }
})
여기까지 useRouter()를 사용하여 nuxtjs에서 쉽게 쿼리스트링을 변경하는 방법에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
